<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .note {
        position: fixed;
        z-index: 1000;
        padding: 5px;
        border: 1px solid black;
        background: white;
        text-align: center;
        font: italic 14px serif;
      }

      blockquote {
        background: #f9f9f9;
        border-left: 10px solid #ccc;
        margin: 0 0 0 100px;
        padding: 0.5em 10px;
        quotes: "\201C""\201D""\2018""\2019";
        display: inline-block;
        white-space: pre;
      }

      blockquote:before {
        color: #ccc;
        content: open-quote;
        font-size: 4em;
        line-height: 0.1em;
        margin-right: 0.25em;
        vertical-align: -0.4em;
      }
    </style>
  </head>

  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
      sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet!
      Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident
      molestias sit tempore omnis recusandae esse sequi officia sapiente.
    </p>

    <blockquote>
      Teacher: Why are you late? Student: There was a man who lost a hundred
      dollar bill. Teacher: That's nice. Were you helping him look for it?
      Student: No. I was standing on it.
    </blockquote>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
      sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet!
      Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident
      molestias sit tempore omnis recusandae esse sequi officia sapiente.
    </p>

    <script>
      /**
       * Positions elem relative to anchor as said in position.
       *
       * @param {Node} anchor     Anchor element for positioning
       * @param {string} position One of: top/right/bottom
       * @param {Node} elem       Element to position
       *
       * Both elements: elem and anchor must be in the document
       */
      function positionAt(anchor, position, elem) {
        anchor.style.position = "absolute";
        const rect = anchor.getBoundingClientRect();
        let top = 0;
        let left = 0;

        switch (position) {
          case "top-out":
            top = rect.y - elem.offsetHeight;
            left = rect.x;
            break;
          case "top-in":
            top = rect.y;
            left = rect.x;
            break;
          case "right-out":
            top = rect.y;
            left = rect.x + rect.width;
            break;
          case "right-in":
            top = rect.y;
            left = rect.x + rect.width - elem.offsetWidth;
            break;
          case "bottom-out":
            top = rect.bottom;
            left = rect.x;
            break;
          case "bottom-in":
            top = rect.bottom - elem.offsetHeight;
            left = rect.x;
            break;
        }

        elem.style.top = top + "px";
        elem.style.left = left + "px";
      }

      /**
       * Shows a note with the given html at the given position
       * relative to the anchor element.
       */
      function showNote(anchor, position, html) {
        // ... your code ...
        const div = document.createElement("div");
        div.className = "note";
        div.textContent = html;
        anchor.append(div);

        positionAt(anchor, position, div);
      }

      // test it
      let blockquote = document.querySelector("blockquote");

      showNote(blockquote, "top-out", "note top out");
      showNote(blockquote, "right-out", "note at the right out");
      showNote(blockquote, "bottom-out", "note bottom out");
      showNote(blockquote, "top-in", "note top in");
      showNote(blockquote, "right-in", "note at the right in");
      showNote(blockquote, "bottom-in", "note bottom in");
    </script>
  </body>
</html>
